{% extends "public/base.html" %}

{% block sidebar %}
    {% include "public/sidebar_resource.html" %}
{% endblock %}


{% block css %}
    <link rel="stylesheet" href="/static/jquery-ui-1.11.4/jquery-ui.css" type="text/css">
    <!-- Bootstrap styling for Typeahead -->
    <link href="/static/plugin/token-field/css/tokenfield-typeahead.css" type="text/css" rel="stylesheet">
    <!-- Tokenfield CSS -->
    <link href="/static/plugin/token-field/css/bootstrap-tokenfield.css" type="text/css" rel="stylesheet">

    <style>
    #tree{float: left;}
    #zabbix{float:left;width:68%; max-width: 77%}
    .unlinnk{cursor:pointer}
    #template_search{width:100%;min-height:40px;}
    #piliang{margin-left:30px;}
    #zb_content dt{text-align: left; padding-left:30px; width:200px; max-width: 250px;}
    #zb_content .unlink{cursor:pointer}
    #zb_content dd{margin-bottom: 10px; margin-left: 0px;}

    </style>



{% endblock %}
{% block content %}

<!-- content main container -->
<div class="main">

<!-- row -->
<div class="row">

    <!-- col 12 -->
    <div class="col-md-12">

    <!-- tile -->
    <section class="tile color transparent-black">



        <!-- tile header -->
        <div class="tile-header">
            <h1><strong>维护主机</strong></h1>
            <div class="controls">
              <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
              <a href="#" class="remove"><i class="fa fa-times"></i></a>
            </div>
        </div>
        <!-- /tile header -->

        <!-- tile body -->
        <div class="tile-body">
            <div class="row">

                <div class="col-md-3" id="tree"></div>
                <div class="col-md-7" id="zabbix">
                    <div class="form-group form-inline " id="template_search">
                        <label for="exampleInputName2">模板搜索: </label>
                        <input type="text" class="col-xs-7" id="tokenfield" placeholder="模板搜索">
                        <button type="submit" class="btn btn-primary" id="link" >模板关联</button>
                        <div id="zabbix_cache" style="display: inline-block;margin-left:10px;">
                            <button type="button" class="btn btn-info" id="rsync_cache_btn"> 同步cache </button>
                            <img src="/static/images/loading-1.gif" style="display: none" id="rsync_cache_img" height="35">
                        </div>
                    </div>
                    <div class="form-group form-inline" id="piliang">
                        <button type="button" class="btn btn-default" id="select_all">全选</button>
                        <button type="button" class="btn btn-default" id="select_fan">反选</button>
                        <button type="button" class="btn btn-default" id="select_no">全不选</button>
                    </div>
                    <dl class="dl-horizontal" id="zb_content">
                    </dl>
                </div>

            </div>
        </div>
        <!-- /tile body -->

    </section>
    <!-- /tile -->

    </div>
    <!-- /col 6 -->

    <!-- col 12 -->

</div>
<!-- /row -->
{% endblock %}






{% block js %}
    <script src="/static/jquery-ui-1.11.4/jquery-ui.js"></script>
    <script src="/static/js/bootstrap-treeview.js"></script>
    <script src="/static/plugin/token-field/bootstrap-tokenfield.min.js"></script>


<script>
var service_id = null;     // 当彰选择的业务线id
var product_id = null;     // 当前选择的产品线id

var zb_content = $("#zb_content");
var unlink;

function getTree() {
  // Some logic to retrieve, or generate tree structure
    var tree = {{ treeview|safe }};
    return tree;
}


function inster_zabbix_data(data){
    html = "";
    $.each( data, function(num, obj){

        html += get_host_html(obj);
        html += get_template_html(obj);

    });
    zb_content.html(html)
}

function get_host_html(data){
    html = '<dt><label class="checkbox-inline"><input type="checkbox" value="'+data.hostid+'">'+data.hostname+'</label></dt>';
    return html
}
function get_template_html(data){
    hostname = data.hostname;
    hostid = data.hostid;
    html = '<dd>';
    html += '<ul class="list-inline">';
    $.each( data.templates, function(num, obj){
        html += '<li>'+obj.name;
        data =   "template='"+obj.name+"'  hostid='"+hostid+"'  templateid='"+obj.templateid+"' hostname='"+hostname+"'";
        html += ' <span class="glyphicon glyphicon-remove unlink" aria-hidden="true" '+data+' ></li>';
    });
    html += '</ul>';
    html += '</dd>';
    return html
}


function unlink_template(){
        // 取消关联zabbix模板
    $(".unlink").click(function(){
        click_obj = $(this);
        cli_hostname = click_obj.attr('hostname');
        cli_hostid = click_obj.attr('hostid');
        cli_templateid = click_obj.attr('templateid');
        cli_template = click_obj.attr('template');
        swal({
            title: "确定删除吗?",
            text: "将从 "+ cli_hostname +" 上取消关联 "+ cli_template +" 模板",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            cancelButtonText: "取消",
            confirmButtonText: "删除",
            closeOnConfirm: false },
                function(){
                    $.post("/resources/zabbix/template/unlink/", {hostid: cli_hostid, templateid: cli_templateid} , function(data){
                        if (data == 1){
                            swal("操作成功", "模板解绑成功", "success");
                            click_obj.parents('li').remove()
                        }else{
                            swal("操作失败", data, "error");
                        }

                    });

                });
    })
}


$(function(){
    $('#tree').treeview({
        data: getTree(),
        onNodeSelected: function(event, data){
            zb_content.empty();

            if (data.pid == null){
                return false
            }
            zb_content.html("<img src='/static/images/loading.jpg'>");
            service_id = data.pid;
            product_id = data.id;
            $.get("/resources/zabbix/hosttemplate/get/", {service_id: service_id, server_purpose: product_id} , function(data){
                inster_zabbix_data(data);
                unlink_template()
            });
        },
        onNodeUnselected: function(event, data){
            zb_content.empty();
            service_id = null;
            product_id = null;
        }
    }).treeview("collapseAll", {silent:"true"});

    $('#tokenfield').tokenfield({
        autocomplete: {
            source: {{ templates|safe }},
            delay: 100
        },
        showAutocompleteOnFocus: true
    });

    // 绑定模板
    $("#link").click(function(){
        // 区取绑定id
        template_ids = new Array();
        $.each($('#tokenfield').tokenfield('getTokens'), function(n, obj){
            template_ids[n] = obj.value
        });
        // 获取hostid
        hostids = new Array();
        $.each($("input:checkbox"), function(n,obj){
            if ($(obj).prop('checked')){
                hostids.push(obj.value)
            }
        });

        if (template_ids.length == 0){
            swal("操作失败", "请选择正确的模板", "error");
            return false;
        }

        if (hostids.length == 0){
            swal("操作失败", "没有沟选主机", "error");
            return false;
        }

        $.post("#", {hostids: hostids.toString(), template_ids: template_ids.toString()} , function(data){
            if (data == 1){
                swal("操作成功", "模板绑定成功", "success");
            }else{
                swal("操作失败", data, "error");
            }

        });
    });

    // 全选
    $("#select_all").click(function(){
        $("input:checkbox").prop("checked",true)

    });

    // 反选
    $("#select_fan").click(function(){
        $("input:checkbox").each(function () {
            this.checked = !this.checked;
         })
    });

    // 全不选
    $("#select_no").click(function(){
        $("input:checkbox").prop("checked",false)
    });



    var rsync_cache_btn = $("#rsync_cache_btn");
    var rsync_cache_img = $("#rsync_cache_img");
    rsync_cache_btn.click(function(){
        rsync_cache_btn.hide();
        rsync_cache_img.show();
        $.post("/resources/zabbix//rsynccache/", function(ret){
            if (ret.status == 0){
                swal("操作成功", "zabbix host 同步成功", "success");
            }else{
                swal("操作失败", data, "error");
            }
            rsync_cache_img.hide();
            rsync_cache_btn.show();
        })

    })
});

</script>

{% endblock %}

